<template>
    <div>
        <div class="register-header">
            <h2 style="margin: 0;">admin管理系统注册页面</h2>
        </div>
        <div class="register-container">
            <div class="register-box">
                <el-form :model="form" ref="form" label-width="150px" :rules="rules"
                    style="width: 800px;margin: 10px auto;;" enctype="multipart/form-data">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户账号" prop="name">
                                <el-input v-model="form.name" placeholder="请输入用户账号" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="用户姓名" prop="username">
                                <el-input v-model="form.username" placeholder="请输入用户姓名"
                                    style="width: 200px;"></el-input>
                            </el-form-item>
                            <!-- 手机号码 -->
                            <el-form-item label="手机号码" prop="telephone">
                                <el-input v-model="form.telephone" placeholder="请输入手机号码"
                                    style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="用户邮箱" prop="email">
                                <el-input v-model="form.email" placeholder="请输入用户邮箱" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="用户密码" prop="password">
                                <el-input v-model="form.password" type="password" placeholder="请输入用户密码"
                                    style="width: 200px;"></el-input>
                            </el-form-item>
                            <!-- 确认密码 -->
                            <el-form-item label="确认密码" prop="rpassword">
                                <el-input v-model="form.rpassword" type="password" placeholder="请输入用户密码"
                                    style="width: 200px;"></el-input>
                            </el-form-item>
                            <!-- 用户年龄 -->
                            <el-form-item label="用户年龄" prop="age">
                                <el-input-number v-model="form.age" type="number" :min="18" :max="50"
                                    placeholder="请输入用户年龄" style="width: 200px;"></el-input-number>
                            </el-form-item>
                            <!-- 用户性别 -->
                            <el-form-item label="用户性别" prop="sex">
                                <el-select v-model="form.sex" placeholder="请选择性别" style="width: 200px;">
                                    <el-option v-for="item in sexData" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- 用户头像 -->
                            <el-form-item label="用户头像" prop="avatar">
                                <el-upload action="#" list-type="picture-card" :auto-upload="false"
                                    :on-change="submitUpload" :limit="1" :file-list="fileList">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                            <!-- 用户角色 -->
                            <el-form-item label="用户角色" prop="role">
                                <el-radio-group v-model="form.role" placeholder="请选择角色" style="width: 200px;">
                                    <el-radio v-for="item in roleData" :key="item.id" :label="item.id">{{ item.name }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-form-item>
                        <el-button type="success" @click="Register()" style="width: 550px;">注册</el-button>

                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width:550px;" @click="Login()">登录</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    // eslint-disable-next-line
    name: 'Register',
    data() {
        var validatePassword = (rule, value, callback) => {
            if (value == "") {
                callback(new Error('请输入确认密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入的密码不一致!'));
            } else {
                callback();
            }
        };
        return {

            form: {
                name: '',
                username: '',
                password: '',
                rpassword: '',
                email: '',
                telephone: '',
                sex: 1,
                age: '',
                role: '',
                avatar: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户账号', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16个字符', trigger: 'blur' }
                ],
                rpassword: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16个字符', trigger: 'blur' },
                    { validator: validatePassword, trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                age: [
                    { required: true, message: '请选择年龄', trigger: 'change' }
                ],
                avatar: [
                    { required: true, message: '请上传头像', trigger: 'change' }
                ],
                telephone: [
                    { required: true, message: '请填写手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '请填写11位手机号', trigger: 'blur' },
                    { pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(18[0-9])|166|198|199|(147))\d{8}$/, message: "手机号码不正确" }
                ],
                email: [
                    { required: true, message: '请填写邮箱', trigger: 'blur' },
                    { type: 'email', message: '请填写正确的邮箱', trigger: 'blur' }
                ],
                role: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ],



            },
               sexData: [
                { label: '男', value: 1 },
                { label: '女', value: 0 }
            ],
            roleData: [
            ],
            fileList: [],
        }
    }, methods: {

        Login() {
            this.$router.push('/Login')
        },
        Register() {
            this.$refs.form.validate(valid => {
                if (valid) {

                    this.$axios.post('/user/register', this.form).then(res => {
                       
                        if (res.code == 200) {

                            this.$message.success({
                                message: '注册成功',
                                type: 'success',
                                onClose: () => {
                                    this.$router.push('/Login')
                                }
                            }
                            )
                        } else {
                            this.$message({
                                message: '注册失败',
                                type: 'error'
                            })

                        }
                    })

                } else {
                    this.$message({
                        message: '校验失败',
                        type: 'warning'
                    })
                }
            })
        },
        submitUpload(file) {
            let formData = new FormData();
            formData.append("file", file.raw);
            formData.append("name", file.name);
            this.$axios.post('/file/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {
               
                console.log(res)
                if (res.code == 200) {
                    this.form.avatar = res.data.url
                    this.$message({
                        message: "上传成功",
                        type: "success"
                    })
                } else {
                    this.$message({
                        message: '上传失败',
                        type: 'error'
                    })
                }
            })
        },
        loadRole() {
            this.$axios.post('/role/listPage', {
                pageSize: 1000,
                pageNum: 1,
                param: {
                    register: 1 + '',
                    status: 1 + ''
                }
            }).then(res => {
               
                if (res.code == 200) {
                    this.roleData = res.data
                    this.form.role = res.data[0].id
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    },
    mounted() {
        this.loadRole()
    },
}
</script>
<style>
.register-header {
    height: 60px;
    background-color: #409eff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-container {
    align-items: center;
    justify-content: center;
    height: 88vh;
    display: flex;
    background-size: 100% 100%;
    background-image: url(http://localhost:8888/file/bj);
}

.register-box {
    width: 800px;
    border-radius: 6px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    text-align: center;
    backdrop-filter: blur(10px);
}
</style>